<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.querySelector(".get");
    var postBtn = document.querySelector(".post");


    getBtn.onclick = function () {
        var wd = ""; //查询所有数据
        var col = "id"; //默认按编号排序
        var type = "asc"; //升序
        var page = 1; //第一页
        var size = 10;

        $.ajax({
            type: "get",
            url: "../php/searchOrderLimit.php",
            data: {
                // wd:wd,
                wd,
                col,
                type,
                page,
                size,
            },
            // async:true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功:", res);
            },
            error: function (err) {
                console.log("错误发生", err);
            }
        })






    }

    postBtn.onclick = function () {
        $.ajax({
            type: "post",
            url: "../php/login.php",
            data: {
                user: "a123123",
                pwd: "123123"
            },
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }
        })
    }




    /**
     * 函数注释
     * ajax(type,url, data = "", async = true, dataType = "text", success)  get请求
     * 
     * @params  type    请求的方式(get/post)
     * @params  url     请求的地址
     * @params  data    请求时携带的数据 (string|object)
     * @params  async   是否异步(默认:true)
     * @params  dataType   接口返回的数据类型(text(文本)  html json css script)
     * @params  success   请求成功时执行的回调函数 (回调函数有一个形式参数  用于接收响应数据)
     * 
     **/
    // 优化2:  
    // 参数数据队列还是需要自己手动拼接 ( `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`) => 太麻烦 

    // 怎么解决?
    // 参数数据队列也是以键值对的形式存在 排名不分先后 => 可以传入一个对象数据 {wd,col,type,page,size}  => 解析为 参数数据队列  ("wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}")





    function ajax(options = {}) {

        var { type = "get", url, data = "", async = true, dataType = "text", success } = options;

        if (data instanceof Object) { // 判断数据是否是纯对象 (有问题!后续补充)

            var list = [];

            for (var key in data) {
                var val = data[key];
                list.push(`${key}=${val}`);
            }
            // console.log(list);

            data = list.join("&");

            // console.log(data);
        }


        var xhr = new XMLHttpRequest(); // 0

        if (type.toLowerCase() == "get") {
            xhr.open("get", data ? url + "?" + data : url, async);
            xhr.send();
        } else if (type.toLowerCase() == "post") {
            xhr.open("post", url, async);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 将数据格式改为FormData
            xhr.send(data);
        }

        xhr.onreadystatechange = function () { // xhr.readyState状态 改变之后才会执行 (ajax请求时异步操作  => 状态改变时异步的 => )
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log("请求成功:", result);

                if (success && typeof success == "function") {
                    // var success = function (res) {
                    //     console.log("请求成功");
                    // }
                    success(result);
                }



            }
        }
    }






</script>

</html>